<template>
  <!-- 档案机构变更 -->
  <changeBase>
    <template v-slot:main-button>
      <mainButton
        @toMainSearch="search"
        @toMainSearchReset="reset"
        :main-button="mainButton"
      />
    </template>
    <template v-slot:search-info>
      <searchMain
        size="mini"
        :label-width="labelWidth"
        ref="searchMain"
        :model="formData"
        :rules="searchRules"
        :itemList="formItemList"
      />
      <el-divider />
    </template>
    <template v-slot:table-main>
      <common-table
        :data="infoList"
        ref="infoList"
        border
        :columns-item="columns"
        :title="infoTitle"
        :loading="false"
        :showHeader="showHeader"
        :displayColumn="displayColumn"
        @removeRowData="removeRowData"
        @checkbox-change="selectChangeEvent"
      />
    </template>
    <!-- <template v-slot:file-form>
      <fileForm :formData="changeData" :columnsData="columnLabel"></fileForm>
    </template> -->
    <template v-slot:add-dialog>
      <organAddDialog
        :flagVisible.sync="dialog_show"
        :dialogType.sync="dialogType"
        ref="organAddDialog"
        :formData="changeData"
        :formItme="columnLabel"
        @submitData="submitData"
        @clearCheckboxRowSelect="clearCheckboxRowSelect"
      />
    </template>
  </changeBase>
</template>

<script>
import changeBase from "@/components/Layout/changeBase.vue"
import mainButton from "@/components/CommonButtons/MainButton.vue"
import searchMain from "@/components/CommonForm/index.vue"
import CommonTable from "@/components/CommonTable/index.vue"
import fileForm from "@/components/FileForm/FileForm.vue"
import organAddDialog from "@/views/dialog/record/organAddDialog.vue"
// 加载模拟数据
import {
  infoList,
  sexs,
  fileStatusType,
  changeType,
  changeState,
  addressList,
  information,
  dataProps,
  searchHandle
} from "@/simdata/healthData.js"
import { dataList } from "@/simdata/record/examination.js"
export default {
  name: "file-change",
  components: {
    changeBase,
    mainButton,
    searchMain,
    CommonTable,
    fileForm,
    organAddDialog
  },
  data() {
    return {
      // 配置常用按钮
      mainButton: [
        {
          label: "新增",
          icon: "el-icon-circle-plus-outline",
          type: "primary",
          handle: () => {
            this.addHandle()
          }
        },
        {
          label: "提交",
          icon: "el-icon-check",
          type: "success",
          handle: () => {
            console.log("点击入户了")
          }
        }
      ],
      // 查询表单
      formData: {
        keyword: "", // 个人信息项 字段
        keyValue: "", // 值
        change_type: null, // 变更类型
        createDate: null, // 建档日期 开始
        endDate: null, // 结束日期
        change_state: null // 变更状态
      },
      // label的宽度
      labelWidth: "auto",
      // 验证
      searchRules: {},
      // 配置search label表单
      formItemList: [
        {
          type: "myInformation",
          label: "个人信息查询项目",
          span: 16,
          options: [
            { label: "个人档案号", value: 1 },
            { label: "姓名", value: 3 },
            { label: "身份证号", value: 4 }
          ],
          props: dataProps
        },
        {
          type: "Select",
          label: "变更类型",
          prop: "change_type",
          width: "120px",
          span: 8,
          options: changeType,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "data",
          label: "变更日期",
          prop: "createDate",
          width: "140px",
          span: 8,
          placeholder: "请选择..."
        },
        {
          type: "data",
          label: "至",
          prop: "endDate",
          width: "140px",
          span: 8,
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "变更状态",
          prop: "change_state",
          width: "120px",
          span: 8,
          options: changeState,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        }
      ],
      // 所有列表数据
      infoTitle: "变更申请列表",
      infoList: dataList,
      // 当前复选框选中
      currentlySelected: [],
      // 配置显示的label标签
      columns: [
        {
          prop: "change_type",
          label: "变更类型",
          width: "100",
          option: changeType
        },
        {
          prop: "name",
          label: "变更人姓名",
          width: "90"
        },
        { prop: "identityNumber", label: "变更人身份证号", width: "180" },
        { prop: "houseName", label: "变更户主姓名", width: "100" },
        {
          prop: "houseIdentityNumber",
          label: "变更户主身份证号",
          width: "180"
        },
        { prop: "changeOrgan", label: "变更机构", width: "180" },
        { prop: "createDate", label: "变更日期", width: "180" },
        { prop: "organ", label: "原迁单位", width: "180" },
        { prop: "migrationLevel", label: "迁移级别", width: "100" },
        {
          prop: "change_state",
          label: "状态",
          width: "100",
          option: changeState
        }
      ],
      // 控制表格前面的勾选按钮
      showHeader: {
        checkStrictly: true
      },
      // 控制表格操作按钮的显示隐藏
      displayColumn: {
        operationCol: true,
        editBtn: false,
        removeBtn: true
      },
      // Main分页
      // mainPage: {
      //   currentPage: 1,
      //   pageSize: 10,
      //   totalResult: 100
      // },
      // 机构变更回显
      changeData: {
        change_type: null,
        name: "",
        migrationLevel: null,
        identityNumber: "",
        createDate: null,
        houseName: "",
        mode: null,
        houseIdentityNumber: "",
        changeOrgan: "",
        organ: "",
        familyId: "",
        houseId: "",
        change_state: 2 // 变更状态
      },
      // 配置显示的label标签
      columnLabel: [
        {
          type: "Select",
          prop: "change_type",
          label: "变更类型",
          options: changeType,
          span: 12
        },
        {
          type: "Input",
          prop: "name",
          label: "变更人姓名",
          span: 12,
          required: true
        },
        {
          type: "Select",
          prop: "migrationLevel",
          label: "迁移级别",
          span: 12,
          options: [{ label: "县级", value: 1 }]
        },
        {
          type: "Input",
          prop: "identityNumber",
          label: "变更人身份证号",
          span: 12,
          required: true
        },
        {
          type: "data",
          label: "变更日期",
          prop: "createDate",
          span: 12,
          required: true,
          placeholder: "请选择..."
        },

        {
          type: "Input",
          prop: "houseName",
          label: "变更户主姓名",
          span: 12,
          required: true
        },
        {
          type: "Select",
          prop: "mode",
          label: "迁移方式",
          span: 12,
          options: [{ label: "内部迁移", value: 1 }]
        },
        {
          type: "Input",
          prop: "houseIdentityNumber",
          label: "变更户主身份证号",
          span: 12,
          required: true
        },

        {
          type: "Input",
          prop: "changeOrgan",
          label: "变更机构",
          span: 12,
          required: true
        },
        {
          type: "Input",
          prop: "organ",
          label: "原迁单位",
          span: 12
        },

        {
          type: "Input",
          prop: "familyId",
          label: "变更人家庭标识符",
          span: 12
        },
        {
          type: "Input",
          prop: "houseId",
          label: "户主家庭标识符",
          span: 12,
          required: true
        }
      ],
      // 弹框标记
      dialog_show: false,
      // 标题控制
      dialogType: "new"
    }
  },
  mounted() {},
  computed: {},
  methods: {
    // 点击新增按钮
    addHandle() {
      this.changeData = this.$options.data().changeData // 重置数据为初始状态
      // console.log("点击新增了")
      this.dialog_show = true
    },
    // 切换常用地址
    handleChange() {
      console.log("点击了")
    },
    // 点击搜索按钮
    search(formName) {
      this.$refs.searchMain.$refs[formName].validate(valid => {
        if (valid) {
          // 调用接口
          this.callbackComponent()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    // 点击重置按钮
    reset(formName) {
      this.$refs.searchMain.$refs[formName].resetFields()
      this.formData.keyword = ""
      this.formData.keyValue = ""
    },
    // 点击搜索后，请求后台接口了
    callbackComponent() {
      console.log("调接口")
    },
    // 基本信息复选框选中
    selectChangeEvent(data) {
      this.dialogType = "edit"
      // 设置单选
      const { checked, row } = data
      console.log(row)
      let { _XID } = row
      if (!checked) {
        _XID = null
      }
      if (checked) {
        this.addHandle()
        this.changeData = Object.assign(this.changeData, row)
      } else {
        this.changeData = this.$options.data().changeData
      }
      // this.$refs.infoList.$refs["infoTable"].clearCheckboxRow()
      // this.currentlySelected = this.infoList.filter(item => item._XID == _XID)
      // this.$refs.infoList.$refs["infoTable"].setCheckboxRow(
      //   this.currentlySelected,
      //   true
      // )
      // if (this.currentlySelected.length > 0) {
      //   this.changeData = this.currentlySelected[0]
      // }
    },
    // 确认提交数据
    submitData(data) {
      if (this.dialogType === "new") {
        const itemData = {
          change_type: this.changeData.change_type,
          name: this.changeData.name,
          migrationLevel: this.changeData.migrationLevel,
          identityNumber: this.changeData.identityNumber,
          createDate: this.changeData.createDate,
          houseName: this.changeData.houseName,
          mode: this.changeData.mode,
          houseIdentityNumber: this.changeData.houseIdentityNumber,
          changeOrgan: this.changeData.changeOrgan,
          organ: this.changeData.organ,
          familyId: this.changeData.familyId,
          houseId: this.changeData.houseId,
          change_state: this.changeData.change_state
        }
        this.$message.success("操作成功!")
        this.infoList.unshift(itemData)
        this.$refs.organAddDialog.handleClose()
      } else {
        this.infoList.some(item => {
          let isFind = item._XID === data._XID
          if (isFind) {
            Object.assign(item, data)
          }
          return isFind
        })
        this.$message.success("操作成功!")
        this.$refs.organAddDialog.handleClose()
      }
    },
    // 删除对应的数据
    removeRowData(data) {
      console.log(data)
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.infoList.splice(data.rowIndex, 1)
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          })
        })
    },
    // 关闭弹框，清空table选中数据
    clearCheckboxRowSelect(data) {
      // console.log(data)
      this.$refs.infoList.$refs["infoTable"].clearCheckboxRow()
    }
  }
}
</script>

<style lang="scss" scoped></style>
